<script setup lang="ts">
defineOptions({
  name: "tabItemDetail"
});

import { ref } from "vue";
import { Dashboard, CaretRight } from "@px-ui/icons-vue";
import { queryIndexData } from "@/api/modules/machine";

import dayjs from "dayjs";
import isToday from "dayjs/plugin/isToday";
import gaugeChart from "./gaugeChart.vue";
import { queryByEqpIdAndIdentify } from "@/api/modules/operation";

dayjs.extend(isToday);

const props = withDefaults(defineProps<{ loading: boolean }>(), { loading: false });

const data = ref<Array<Record<string, any>>>([]);

const mapData = (arr: Array<any>) => {
  if (!arr?.length) return [];
  return arr.map(item => {
    item.subEquipments = item.filters?.map(ite => {
      const { lifecycle_act, lifecycle_exp_left, outdated, invalid } = ite;
      if (lifecycle_exp_left == 0) {
        ite["translateY"] = 0;
      } else if (lifecycle_exp_left && lifecycle_act) {
        ite["translateY"] = 36 + Math.floor((160 * lifecycle_exp_left) / (lifecycle_exp_left + lifecycle_act));
      } else if (lifecycle_act == 0) {
        ite["translateY"] = 232;
      } else {
        ite["translateY"] = 232;
      }
      return ite;
    });
    // item.devType = "MAU"; // 这里旧代码强制选定了类型，目前接口自行返回类型 所有注释了
    return item;
  });
};

const initData = async (arr: any) => {
  data.value = mapData(arr);
  // initChartParam(data.value);
};

const initChartParam = async (data: any) => {
  let reqIds = [];
  data.map(item => {
    item.filters.map(items => {
      reqIds.push(items.ffuCode);
    });
  });

  const params = { identifies: ["pressure"], eqpIds: reqIds };
  let res = await queryByEqpIdAndIdentify(params);
  res = Object.values(res).map(item => item.pressure);
  const datas = res.map(item => item.positionNum);

  if (datas && datas.length) {
    queryZhibiao(datas);
  }
};

// 查询指标数据
const queryZhibiao = async (data: any) => {
  const res = await queryIndexData(data, () => {});
  console.log(3333, res);
};
// 过滤器状态
const initStatus = (row: any) => {
  let msg = "--";

  if (row?.outdated && !row?.invalid) {
    msg = "临期";
  }
  if (row?.invalid) {
    msg = "失效";
  }
  if (!row?.invalid && !row?.outdated) {
    msg = "健康";
  }
  return msg;
};

// 过滤器状态 颜色
const initStatusColor = (items: any) => {
  let color = "#000";

  if (items.outdated) {
    color = "#FFBD00";
  }
  if (items.invalid) {
    color = "#FF0000";
  }
  if (!items.invalid && !items.outdated) {
    color = "#10B981";
  }
  return color;
};

defineExpose({
  initData
});
</script>

<template>
  <div class="detailContent">
    <div v-for="item in data" :key="item?.ffuCode" class="detailInfo-item">
      <div class="item-title">{{ item?.ffuName }}</div>
      <div class="item-content">
        <div v-for="ite in item?.subEquipments" :key="ite?.ffuCode" class="item-content-item">
          <div class="item-content-item-top">
            <gaugeChart :item="ite" />
          </div>
          <div class="item-content-item-content">
            <div class="item-content-flag">
              <px-icon :style="{ transform: `translateY(${ite.translateY}px)`, color: ite.translateY === 0 ? 'red' : 'var(--px-color-primary)' }"
                ><CaretRight
              /></px-icon>
            </div>
            <div class="item-content-step">
              <div class="item-content-common item-content-expiredDate">{{ dayjs(ite?.filterNextInstallDate).format("DD/MM/YYYY") || "--" }}</div>
              <div class="item-content-common item-content-expiredDate">
                <div class="icon">
                  <div class="text">AI</div>
                </div>
                {{ dayjs(ite?.filterNextInstallDate_AI).format("DD/MM/YYYY") || "--" }}
              </div>
              <div class="item-content-common item-content-comingDate" :style="{ color: initStatusColor(ite) }">{{ initStatus(ite) }}</div>
              <div class="item-content-usedDate">
                <div class="item-content-usedDate-common item-content-usedDate-use">
                  <div class="label">已使用</div>
                  <div class="num">
                    <span class="num-data">{{ ite?.lifecycle_act || "--" }}</span>
                    <span v-if="typeof ite?.lifecycle_act === 'number'" class="num-unit">天</span>
                  </div>
                </div>
                <div class="item-content-usedDate-common item-content-usedDate-rest">
                  <div class="label" :style="{ color: ite?.lifecycle_exp_left < 20 ? 'red' : '' }">剩余</div>
                  <div class="num" :style="{ color: ite?.lifecycle_exp_left < 20 ? 'red' : '' }">
                    <span class="num-data">{{ ite?.lifecycle_exp_left || "--" }}</span>
                    <span v-if="typeof ite?.lifecycle_exp_left === 'number'" class="num-unit">天</span>
                  </div>
                </div>
              </div>
              <div class="item-content-common item-content-startDate">{{ dayjs(ite?.filterInstallDate).format("DD/MM/YYYY") || "--" }}</div>
            </div>
          </div>
          <div class="item-content-item-bottom">{{ ite?.filterType }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.detailContent {
  display: flex;
  flex-flow: row wrap;
  padding-bottom: 16px;

  .detailInfo-item {
    display: flex;
    flex-direction: column;
    margin-right: 16px;
    margin-bottom: 24px;
    border: 1px solid #ddd;
    border-radius: 8px;

    .item-title {
      box-sizing: border-box;
      height: 36px;
      padding: 0 24px;
      font-size: 14px;
      font-weight: 600;
      line-height: 36px;
      color: #333;
      text-align: center;
      background-color: #e7eefb;
      border-bottom: 1px solid #ddd;
    }

    .item-content {
      display: flex;
      // height: 355px;
      .item-content-item {
        border-right: 1px solid #ddd;

        &:last-of-type {
          border-right: none;
        }

        .item-content-item-top {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 141px;
          height: 75px;
          padding: 0 12px;
          border-bottom: 1px solid #ddd;

          .px-icon {
            font-size: 40px;
            color: var(--px-color-primary);
          }
        }

        .item-content-item-bottom {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 140px;
          // height: 36px;
          padding: 0 12px;
        }

        .item-content-item-content {
          display: flex;
          align-items: stretch;
          border-bottom: 1px solid #ddd;

          .item-content-flag {
            width: 20px;
            border-right: 1px solid #ddd;

            .px-icon {
              margin-top: 8px;
              font-size: 20px;
              font-weight: 600;
              color: var(--px-color-primary);
            }
          }

          .item-content-step {
            flex: 1;

            .item-content-common {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 36px;
              padding: 0 8px;
              line-height: 1;
              color: #333;
              letter-spacing: 1px;
            }

            .item-content-expiredDate {
              position: relative;
              background-color: #dbffe5;
              border-bottom: 1px solid #ddd;

              .icon {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                width: 0;
                height: 0;
                border-top: 19px solid #10b981;
                border-right: 19px solid transparent;

                .text {
                  position: absolute;
                  top: -18px;
                  left: 1px;
                  z-index: 3;
                  font-size: 10px;
                  font-weight: 500;
                  color: #fff;
                }
              }
            }

            .item-content-comingDate {
              background-color: #fff;
            }

            .item-content-usedDate {
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              gap: 16px;
              align-items: center;
              justify-content: center;
              height: 160px;
              padding: 0 8px;
              border-bottom: 1px solid #ddd;

              .item-content-usedDate-common {
                .label {
                  text-align: center;
                }

                .num {
                  text-align: center;

                  .num-data {
                    font-size: 26px;
                    font-weight: 600;
                  }

                  .num-unit {
                    padding-left: 2px;
                    font-size: 12px;
                  }
                }
              }
              // .item-content-usedDate-use {
              // }
              // .item-content-usedDate-rest {
              // }
            }

            .item-content-startDate {
              background-color: #dbffe5;
            }
          }
        }
      }
    }
  }
}
</style>
